<template>
  <div class="goodList">
    <sticky scroll-box="" ref="sticky" :check-sticky-support="false" class="sticky" v-if="true">
      <slot name='top'>
        <div class="top">{{title}}</div>
      </slot>
    </sticky>
    <scroller 
    	lock-x 
    	height="59.2rem" 
    	@on-scroll-bottom="onScrollBottom" 
    	ref="scrollerBottom" 
    	:scroll-bottom-offset="0">
      <div class="box1">
        <grid :cols='2' class='padding0'>
          <grid-item 
          :link="{name:'gooddetail',query:{Id:'12'}}" 
          v-for="(value,index) in filterGoodLists" 
          :key="index" style="" class="item">
            <img :src="value.img" />
            <div class="content">
              <h3>{{value.goodName}}</h3>
              <span>{{value.goodPrice}}</span>
            </div>
          </grid-item>
        </grid>
        <load-more tip="加载更多" v-if='showMore'></load-more>
      </div>
    </scroller>
  </div>
</template>

<script>
import { Grid, GridItem, Scroller, LoadMore, Sticky } from 'vux'
export default {
  components: {
    Grid,
    GridItem,
    Scroller,
    LoadMore,
    Sticky
  },
  props: {
    title: {
      type: String,
      default: '为 / 你 / 推 / 荐'
    },
    goodLists: {
      type: Array
    }
  },
  computed:{
  	filterGoodLists(){
  		return this.goodList.filter((value,index)=>{
  				return index<this.loadingCount;
  		})  		
  	}
  },
  data () {
    return {
      goodList: [],
      loadingCount:6,
      titles: this.title,
      showMore:true,
      pageNum:6
    }
  },
  methods: {
    onScrollBottom () {
      if (this.onFetching) {
        // do nothing
      } else {
        this.onFetching = true
        const len=	this.goodList.length;
        setTimeout(() => {
        	if(len>=this.loadingCount+this.pageNum){
        		this.loadingCount += this.pageNum 
        	}else if(len>this.loadingCount){
        		this.loadingCount=len;
        	}
          this.$nextTick(() => {
          	if( this.$refs.scrollerBottom)this.$refs.scrollerBottom.reset()
            
          })
          this.onFetching = false
        }, 800)
      }
    },
    loading(){
    	this.showMore=this.loadingCount<=this.pageNum?false:true;
    },
    init(){    	
    		this.$store.state.goodListData.then(data => {
		  		this.goodList=data;
		  		this.loading();
		  	})
    },
    bindSticky () {
      this.$nextTick(() => {
        this.$refs.sticky.bindSticky()
      })
    }
  },
  mounted (){
  	this.$store.commit('changeGoodListData',700);
  	this.init();
  },
  watch:{
  	loadingCount(){
			this.loading();
  	}
  }
}
</script>

<style scoped>
.box1 {
  padding-bottom: 5rem;
}

.item {
  width: 100%;
  height: 100%;
  background: white;
}

.item img {
  width: 100%;
  height: 80%;
}

.item h3 {
  font-size: 0.8rem;
  color: rgba(0, 0, 0, 0.57);
	white-space:nowrap; 
	overflow:hidden; 
	text-overflow:ellipsis;
  
}

.item span {
  color: red;
}
.top {
  width: 100%;
  height: 2.5rem;
  background: #f0f0f0;
  line-height: 2.5rem;
  text-align: center;
}
</style>